<template>
	<view class="sort-button">
		<text :class="sortClass" @click="toggleSort">{{ sortText }}<text :class="arrowClass"></text></text>
	</view>
</template>

<script>
	export default {
		props: {
			sortText: {
				type: String,
				default: ''
			},
			isAscend: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isAscending: false, // 默认降序
			};
		},
		computed: {
			sortClass() {
				return this.isAscending ? 'ascending' : 'descending';
			},
			arrowClass() {
				return this.isAscending ? 'arrowD' : 'arrowA';
			},
			// sortText() {
			// 	return this.isAscending ? '升序 ' : '降序';
			// },
		},
		mounted() {
			this.isAscending = this.isAscend;
		},
		methods: {
			toggleSort() {
				this.isAscending = !this.isAscending;
				this.$emit('sortChanged', this.isAscending ? 'asc' : 'desc'); // 触发排序事件
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ascending {
		color: #000000;
		position: relative;
	}

	.descending {
		color: #666666;
		position: relative;
	}

	.arrowA::before {
		position: absolute;
		content: "";
		top: 50%;
		right: -20rpx;
		width: 16rpx;
		height: 16rpx;
		border-bottom: 2rpx solid #000;
		border-right: 2rpx solid #000;
		transform: rotate(45deg) translateY(-87.5%);
	}

	.arrowD::before {
		position: absolute;
		content: "";
		top: 50%;
		right: -30rpx;
		width: 16rpx;
		height: 16rpx;
		border-top: 2rpx solid #000;
		border-left: 2rpx solid #000;
		transform: rotate(45deg) translateY(-11.5%);
	}
</style>